<template>
  <div class="editShop-box">
    <nav-com
      :title="id ? '店铺详情' : '完善店铺信息'"
      :showView="showView"
      @back="backHandler()"
    ></nav-com>
    <div class="shop-form">
      <van-form>
        <van-cell-group inset>
          <van-field
            name="uploader"
            class="upload-field"
          >
            <template #input>
              <div class="real_photo_btn" v-if="id">
                <img :src="returnForm.avatar" v-if="returnForm.avatar"/>
                <img :src="avatarIcon" v-else style="border-radius:0"/>
              </div>

              <van-uploader v-model="fileList" :after-read="afterRead"  :before-delete="beforeDel" v-else>
                <div :style="{ display: styledisplay }" class="real_photo_btn">
                   <img :src="returnForm.avatar" v-if="returnForm.avatar"/>
                   <img :src="avatarIcon" v-else style="border-radius:0"/>
                </div>
              </van-uploader>
            </template>
          </van-field>
          <van-field
            v-model="returnForm.shopname"
            name="店铺名称"
            label="店铺名称"
            placeholder="店铺名称"
            input-align="right"
            :readonly="id ? true : false"
          />
          <van-field
            v-model="returnForm.name"
            name="联系人"
            label="联系人"
            placeholder="联系人"
            :readonly="id ? true : false"
            input-align="right"
          />
          <van-field
            v-model="returnForm.mobile"
            name="联系电话"
            label="联系电话"
            readonly
            placeholder="联系电话"
            input-align="right"
          />
        </van-cell-group>
        <div style="margin: 16px" v-if="!id">
          <van-button block type="primary" @click="toshopApply">
            立即完善信息
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Toast, Uploader, Icon, Form, Field, CellGroup } from "vant";
import Upgrade from "@/component/upgrade.vue";
import {
  shopauthdetail,
  postImages5g,
  shopcomplete,
  shopdetail,
} from "@/api/api";
export default {
  name: "index",
  components: {
    navCom,
    Loading,
    Upgrade,
  },
  data() {
    return {
      avatarIcon: require("@/assets/shop/tx.png"),
      showView: true,
      LOADING: true,
      mobile: {},
      styledisplay: "block",
      fileList: [],
      returnForm: {
        shopname: "",
        name: "",
        mobile: "",
        avatar: "",
      },
      id: "",
    };
  },
  mounted() {
    this.id = this.$route.params["id"];
    this.init();
  },
  methods: {
    //返回
    backHandler() {
      this.$router.go(-1);
    },
    init() {
      this.mobile = weixin.loginMobile();
      if (this.id) {
        shopdetail({ id: this.id }).then((res) => {
          if (res.data.code == 1) {
            if (res.data.data) {
              this.returnForm = res.data.data;
              if (!this.returnForm.mobile) {
                this.returnForm.mobile = this.mobile;
              }
            } else {
              this.returnForm.mobile = this.mobile;
              Toast(res.data.msg);
            }
          }
        });
      } else {
        shopauthdetail({ mobile: this.mobile }).then((res) => {
          if (res.data.code == 1) {
            if (res.data.data) {
              this.returnForm = res.data.data;
              if (!this.returnForm.mobile) {
                this.returnForm.mobile = this.mobile;
              }
            } else {
              this.returnForm.mobile = this.mobile;
              Toast(res.data.msg);
            }
          }
        });
      }
    },
    //图片上传
    afterRead(file) {
      if (this.fileList.length > 0) {
        this.styledisplay = "none";
      }
      let that = this;
      let funBack = function (file) {
        var fd = new FormData();
        fd.append("file", file);
        postImages5g(fd).then((res) => {
          console.log(res);
          that.returnForm.avatar = res.data.data.fullurl;
          that.styledisplay = "none";
          that.$forceUpdate();
        });
      };
      weixin.uploadIF(file, funBack);
      return false;
    },
    beforeDel(file) {
       this.fileList=[]
        console.log("222", this.fileList)
      if (this.fileList.length > 0) {
        this.styledisplay = "none";
      } else {
        this.styledisplay = "block";
      }
      return true;
    },
    toshopApply() {
      if (!this.returnForm.avatar) {
        Toast("请上传店铺头像");
        return;
      }
      if (!this.returnForm.shopname) {
        Toast("请填写店铺名称");
        return;
      }
      if (!this.returnForm.name) {
        Toast("请填写联系人");
        return;
      }
      shopcomplete({
        shopname: this.returnForm.shopname,
        name: this.returnForm.name,
        mobile: this.returnForm.mobile,
        avatar: this.returnForm.avatar,
      }).then((res) => {
         if (res.data.code == 1) {
          Toast("已经提交等待审核！");
          this.LOADING = true;
          setTimeout(() => {
            this.$router.push({
              name: "allshopgoods",
              params: { id:this.returnForm.id }
            })
          }, 1500);
        } else {
          Toast(res.data.msg);
        }
      });
    },
  },
};
</script>
<style scoped>
.editShop-box {
  background: #f8f8f8;
  height: 100vh;
}
.shop-form {
  padding-top: 10px;
}
.avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}
.van-button--primary {
  background: #fe4b20;
  position: fixed;
  bottom: 10px;
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
}
.upload-field{
  margin-left:calc(50% - 55px);
  /* width: 72px;
  height: 72px; */
}
.upload-field img,.real_photo_btn img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}
/deep/.van-image__img {
  border-radius: 50%;
  width: 72px;
  height: 72px;
}
</style>